<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * color button.
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;editor/plugin/color/btn&quot;, function (S, Editor, Button, Overlay4E, DialogLoader) {
    var Node = S.Node;

    var COLORS = [
        [&quot;000&quot;, &quot;444&quot;, &quot;666&quot;, &quot;999&quot;, &quot;CCC&quot;, &quot;EEE&quot;, &quot;F3F3F3&quot;, &quot;FFF&quot;],
        [&quot;F00&quot;, &quot;F90&quot;, &quot;FF0&quot;, &quot;0F0&quot;, &quot;0FF&quot;, &quot;00F&quot;, &quot;90F&quot;, &quot;F0F&quot;],
        [
            &quot;F4CC&quot; + &quot;CC&quot;, &quot;FCE5CD&quot;, &quot;FFF2CC&quot;, &quot;D9EAD3&quot;, &quot;D0E0E3&quot;, &quot;CFE2F3&quot;, &quot;D9D2E9&quot;, &quot;EAD1DC&quot;,
            &quot;EA9999&quot;, &quot;F9CB9C&quot;, &quot;FFE599&quot;, &quot;B6D7A8&quot;, &quot;A2C4C9&quot;, &quot;9FC5E8&quot;, &quot;B4A7D6&quot;, &quot;D5A6BD&quot;,
            &quot;E06666&quot;, &quot;F6B26B&quot;, &quot;FFD966&quot;, &quot;93C47D&quot;, &quot;76A5AF&quot;, &quot;6FA8DC&quot;, &quot;8E7CC3&quot;, &quot;C27BAD&quot;,
            &quot;CC0000&quot;, &quot;E69138&quot;, &quot;F1C232&quot;, &quot;6AA84F&quot;, &quot;45818E&quot;, &quot;3D85C6&quot;, &quot;674EA7&quot;, &quot;A64D79&quot;,
            &quot;990000&quot;, &quot;B45F06&quot;, &quot;BF9000&quot;, &quot;38761D&quot;, &quot;134F5C&quot;, &quot;0B5394&quot;, &quot;351C75&quot;, &quot;741B47&quot;,
            &quot;660000&quot;, &quot;783F04&quot;, &quot;7F6000&quot;, &quot;274E13&quot;, &quot;0C343D&quot;, &quot;073763&quot;, &quot;20124D&quot;, &quot;4C1130&quot;
        ]
    ], html;


    function initHTML() {
        html = &quot;&lt;div class='{prefixCls}editor-color-panel'&gt;&quot; +
            &quot;&lt;a class='{prefixCls}editor-color-remove' &quot; +
            &quot;href=\&quot;javascript:void('清除');\&quot;&gt;&quot; +
            &quot;清除&quot; +
            &quot;&lt;/a&gt;&quot;;
        for (var i = 0; i &lt; 3; i++) {
            html += &quot;&lt;div class='{prefixCls}editor-color-palette'&gt;&lt;table&gt;&quot;;
            var c = COLORS[i], l = c.length / 8;
            for (var k = 0; k &lt; l; k++) {
                html += &quot;&lt;tr&gt;&quot;;
                for (var j = 0; j &lt; 8; j++) {
                    var currentColor = &quot;#&quot; + (c[8 * k + j]);
                    html += &quot;&lt;td&gt;&quot;;
                    html += &quot;&lt;a href='javascript:void(0);' &quot; +
                        &quot;class='{prefixCls}editor-color-a' &quot; +
                        &quot;style='background-color:&quot;
                        + currentColor
                        + &quot;'&quot; +
                        &quot;&gt;&lt;/a&gt;&quot;;
                    html += &quot;&lt;/td&gt;&quot;;
                }
                html += &quot;&lt;/tr&gt;&quot;;
            }
            html += &quot;&lt;/table&gt;&lt;/div&gt;&quot;;
        }
        html += &quot;&quot; +
            &quot;&lt;div&gt;&quot; +
            &quot;&lt;a class='{prefixCls}editor-button {prefixCls}editor-color-others ks-inline-block'&gt;其他颜色&lt;/a&gt;&quot; +
            &quot;&lt;/div&gt;&quot; +
            &quot;&lt;/div&gt;&quot;;
    }

    initHTML();

    var ColorButton = Button.extend({
        initializer: function () {
            var self = this;
            self.on(&quot;blur&quot;, function () {
                // make select color works
                setTimeout(function () {
                    self.colorWin &amp;&amp; self.colorWin.hide();
                }, 150);
            });
            self.on('click', function () {
                var checked = self.get(&quot;checked&quot;);
                if (checked) {
                    self._prepare();
                } else {
                    self.colorWin &amp;&amp; self.colorWin.hide();
                }
            });
        },

        _prepare: function () {
            var self = this,
                editor = self.get(&quot;editor&quot;),
                prefixCls = editor.get('prefixCls'),
                colorPanel;

            self.colorWin = new Overlay4E({
                // TODO 变成了 -1??
                elAttrs: {
                    tabindex: 0
                },
                elCls: prefixCls + &quot;editor-popup&quot;,
                content: S.substitute(html, {
                    prefixCls: prefixCls
                }),
                width: 172,
                zIndex: Editor.baseZIndex(Editor.ZIndexManager.POPUP_MENU)
            }).render();

            var colorWin = self.colorWin;
            colorPanel = colorWin.get(&quot;contentEl&quot;);
            colorPanel.on(&quot;click&quot;, self._selectColor, self);
            colorWin.on(&quot;hide&quot;, function () {
                self.set(&quot;checked&quot;, false);
            });
            var others = colorPanel.one(&quot;.&quot; + prefixCls + &quot;editor-color-others&quot;);
            others.on(&quot;click&quot;, function (ev) {
                ev.halt();
                colorWin.hide();
                DialogLoader.useDialog(editor, &quot;color&quot;, undefined, self);
            });
            self._prepare = self._show;
            self._show();
        },

        _show: function () {
            var self = this,
                el = self.get(&quot;el&quot;),
                colorWin = self.colorWin;
            colorWin.set(&quot;align&quot;, {
                node: el,
                points: [&quot;bl&quot;, &quot;tl&quot;],
                offset: [0, 2],
                overflow: {
                    adjustX: 1,
                    adjustY: 1
                }
            });
            colorWin.show();
        },

        _selectColor: function (ev) {
            ev.halt();
            var self = this,
                editor = self.get(&quot;editor&quot;),
                prefixCls = editor.get('prefixCls'),
                t = new Node(ev.target);
            if (t.hasClass(prefixCls + &quot;editor-color-a&quot;)) {
                self.fire('selectColor', {
                    color: t.style(&quot;background-color&quot;)
                });
            } else if (t.hasClass(prefixCls + 'editor-color-remove')) {
                self.fire('selectColor', {
                    color: null
                });
            }
        },

        destructor: function () {
            var self = this;
            if (self.colorWin) {
                self.colorWin.destroy();
            }
        }
    }, {
        ATTRS: {
            checkable: {
                value: true
            },
            mode: {
                value: Editor.Mode.WYSIWYG_MODE
            }
        }
    });

    var tpl = '&lt;div class=&quot;{icon}&quot;&gt;&lt;/div&gt;' +
        '&lt;div style=&quot;background-color:{defaultColor}&quot;' +
        ' class=&quot;{indicator}&quot;&gt;&lt;/div&gt;';

    function runCmd(editor, cmdType, color) {
        setTimeout(function () {
            editor.execCommand(cmdType, color);
        }, 0);
    }

    ColorButton.init = function (editor, cfg) {
        var prefix = editor.get('prefixCls') + 'editor-toolbar-',
            cmdType = cfg.cmdType,
            defaultColor = cfg.defaultColor,
            tooltip = cfg.tooltip;

        var button = editor.addButton(cmdType, {
            elCls: cmdType + 'Btn',
            content: S.substitute(tpl, {
                defaultColor: defaultColor,
                icon: prefix + 'item ' + prefix + cmdType,
                indicator: prefix + 'color-indicator'
            }),
            mode: Editor.Mode.WYSIWYG_MODE,
            tooltip: &quot;设置&quot; + tooltip
        });

        var arrow = editor.addButton(cmdType + 'Arrow', {
            tooltip: &quot;选择并设置&quot; + tooltip,
            elCls: cmdType + 'ArrowBtn'
        }, ColorButton);

        var indicator = button.get('el').one('.' + prefix + 'color-indicator');

        arrow.on('selectColor', function (e) {
            indicator.css('background-color', e.color || defaultColor);
            runCmd(editor, cmdType, e.color);
        });

        button.on('click', function () {
            runCmd(editor, cmdType, indicator.style('background-color'));
        });
    };

    return ColorButton;
}, {
    requires: ['editor', '../button', '../overlay', '../dialog-loader']
});</pre>
</body>
</html>
